 body {
    font-family: Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", sans-self;
}
html,body{
    width: 100%;
    height: 100%;
}
::-webkit-scrollbar {
    width: 0;
    height: 0;
}
html,body,ul,li,h2,h3,h1,h4,h5,h6,img,figure,figcaption,div,p,
header,footer,input,button,canvas{
    margin: 0;
    padding: 0;
}
input{
    outline: none;
}
button{
    outline: none;
}
img{
    display: block;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
}
body{    
    -o-user-select:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
}
 @keyframes a1 {
       
            0%{
               width: 0%;
               height: 0%;
            }

            100% {
               width: 2rem;
               height: 2.5rem;
            }
        }
 @keyframes a2 {
       
            0%{
               width: 0%;
               height: 0%;
            }

            100% {
               width: 2.8rem;
               height: 1.6rem;
            }
        }
 @keyframes a3 {
       
            0%{
               width: 0%;
               height: 0%;
            }

            100% {
               width: 1.1rem;
               height: 2.9rem;
            }
        }
@keyframes arrowMove {
            0% {
                opacity: 0;
                transform: translate(0, 0);
            }
            50% {
                opacity: 1;
                transform: translate(0, -30px);
            }
            100% {
                opacity: 0;
                transform: translate(0, -50px);
            }
        }
            
@-webkit-keyframes arrowMove {
                0% {
                    opacity: 0;
                    -webkit-transform: translate(0, 0);
                }
                50% {
                    opacity: 1;
                    -webkit-transform: translate(0, -30px);
                }
                100% {
                    opacity: 0;
                    -webkit-transform: translate(0, -50px);
                }
}
 @keyframes musicMove {
            0% {
                transform: rotate(0);
            }
            100% {
                transform: rotate(360deg);
            }
}
 @-webkit-keyframes musicMove {
            0% {
                -webkit-transform: rotate(0);
            }
            100% {
                -webkit-transform: rotate(360deg);
            }
}
@keyframes loadingMove {
            0% {
                transform: scaleY(1);
            }
            50% {
                transform: scaleY(0.2);
            }
            100% {
                transform: scaleY(1);
            }
}
.wrapper{
    width: 100%;
    height: 100%; 
    #loading{
         width: 100%;
         height: 100%;
         position: absolute;
         left: 0;
         top: 0;
         z-index: 20;
         background: #fff;
         div{
            font-size: 0.3rem;
            color: #0F0;
            width: 100%;
            text-align: center;
            top: 50%;
            position: absolute;
         }
         ul{
            position: absolute;
            left: 50%;
            top: 40%;
            width: 0.9rem;
            margin-left: -0.45rem;
            li{
                width: 0.05rem;
                height: 0.4rem;
                margin-right: 0.1rem;
                background: #0F0;
                float: left;
                animation: 2s linear infinite loadingMove;
                &:nth-of-type(1){
                    animation-delay: 0s;
                }
                &:nth-of-type(2){
                    animation-delay: -0.2s;
                }
                &:nth-of-type(3){
                    animation-delay: -0.4s;
                }
                &:nth-of-type(4){
                    animation-delay: -0.6s;
                }
                &:nth-of-type(5){
                    animation-delay: -0.8s;
                }
                &:nth-of-type(6){
                    animation-delay: -1s;
                }
            }
         }
    }
    #img_canvas{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
    }
     #arrow {
            width: 0.9rem;
            height: 0.52rem;
            background: url(../img/arr.png) no-repeat;
            background-size: 100% 100%;
            position: absolute;
            left: 50%;
            bottom: 15px;
            margin-left: -0.45rem;
            z-index: 8;
            animation: 1s infinite arrowMove;
            -webkit-animation: 1s infinite arrowMove;
    }
    #music.active{
          animation: 1s linear infinite musicMove;
          -webkit-animation: 1s linear infinite musicMove;
    }
    #music {
            width: 0.7rem;
            height: 0.7rem;
            background: url(../img/music.png) no-repeat;               
            background-size: 100% 100%;
            position: absolute;
            top: 0.2rem;
            right: 0.2rem;
            z-index: 8;
    }
    .swiper-container {
        width: 100%;
        height: 100%;
        position: relative;
        
        /* Center slide text vertically */
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
        .swiper-wrapper{
            width: 100%;
            height: 100%;
            .swiper-slide-active#page li{
                transform: rotate(720deg);
            }
            .swiper-slide-active#page{ 
                transform: rotate(720deg);          
                .ball1{
                   left: 50%;
                   top: 30%;
                } 
                .ball2{
                     left: 20%;
                     top: 40%;
                }
                .ball3{
                     left: 80%;
                     top: 40%;
                }
                .ball4{
                    left: 20%;
                    top: 60%;
                }
                .ball5{
                     left: 80%;
                     top: 60%;
                }
                .ball6{
                    left: 50%;
                    top: 75%;
                }
            }
            .swiper-slide-active#page2{
                .slide_3{
                    transform: rotateY(720deg);
                }
                
            }
            .swiper-slide-active#page3{
                .slide_4{
                    li{
                        &:nth-of-type(1){
                           animation: a1 1s linear forwards; 
                        }
                          &:nth-of-type(2){
                           animation: a2 1s linear forwards; 
                        }
                          &:nth-of-type(3){
                           animation: a3 1s linear forwards; 
                        }
                    }
                }
                
            }
            .swiper-slide {
                font-size: 18px;
                background-size: cover;
                position: relative;
            
                    .slide_1{
                        position: absolute;
                        left: 20%;
                        top: 65%;
                        color: #fff;
                        font-size: 0.3rem;
                    }  
                    .slide_2 {
                        li{ 
                            width: 0.9rem;
                            height: 0.9rem;
                            position: absolute;
                            margin-left: -0.45rem;
                            background-size: cover;
                            transition-duration: 1s;                         
                            top: 50%;
                            left: 50%;
                        }

                        .ball1 {
                            background: url(../img/c1.png) no-repeat;
                            background-size:100% 100% ;
                            
                        }
                        .ball2 {
                            background: url(../img/c2.png) no-repeat;
                            background-size:100% 100% ;
                           
                        }
                        .ball3 {
                            background: url(../img/c3.png) no-repeat;
                            background-size:100% 100% ;
  
                        }
                        .ball4 {
                            background: url(../img/c4.png) no-repeat;
                            background-size:100% 100% ;
                            
                        }
                        .ball5 {
                            background: url(../img/c5.png) no-repeat;
                            background-size:100% 100% ;
                           
                        }
                        .ball6 {
                            background: url(../img/c6.png) no-repeat;
                            background-size:100% 100% ;
                            
                        }
                        
                    }
                    .slide_3{
                        width: 4.6rem;
                        height: 2.22rem;
                        background: url(../img/d1.png) no-repeat;
                        background-size: 100% 100%;
                        position: absolute;
                        left: 50%;
                        margin-left: -2.3rem;
                        bottom: 20%;
                        transition-duration: 1s; 
                    } 
                    .slide_4{
                        li{
                            color: #fff;
                            font-size: 0.22rem;
                            border: 2px #FFF solid;
                            border-radius: 5px;
                            box-shadow: 0 0 15px #FFF;
                            word-wrap: break-word;
                            position: absolute;
                            overflow: hidden;
                            padding: 5px;
                            box-sizing: border-box;

                            &:nth-of-type(1){
                                width: 2rem;
                                height: 2.5rem;
                                left: 4%;
                                top:14%;
                                
                            }
                             &:nth-of-type(2){
                                width: 2.8rem;
                                height: 1.6rem;
                                left: 50%;
                                top:18%;
                            }
                             &:nth-of-type(3){
                                width: 1.1rem;
                                height: 2.9rem;
                                left: 76%;
                                top:39%;
                            }
                        }
                    }            
            
            }
        }
    }

}
 